{% extends 'base.html' %}
{% block content %}
<style>
    .profile-wrapper{
    display: flex;
    gap: 20px;
    }
    .big-wrapper {
    background-color: #fff;
    margin-top: 60px;
    }
    .avatar {
    width: 120px;
    height: 120px;
    border-color: #000;
    background-color: #eaeaea;
    transition: .5s ease;
    }
    .avatar:hover{
    background-color: #fff;
    }
    .plus{
    border-color: black;
    border-style: solid;
    border-width: 2px;
    width: 30px;
    height: 30px;
    border-radius: 15px;
    font-size: 26px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: auto;
    }
    .user-id{
    color: #aaaaaa;
    margin-bottom: 20px;
    font-size: 22px;
    padding-left: 10px;
    }
    .liked {
    font-size: 22px;
    }
    .user-name,
    .user-email {
    font-size: 22px;
    margin-top: 10px;
    background-color: #eaeaea;
    border-radius: 10px;
    padding-left: 10px;
    width: 800px;
    }
    a {
        text-decoration: none;
        color: black;
        font-size: 25px;
      }
</style>
<h1>Профиль</h1>

<div class="wrapper mt-3">
    <div class = "profile-wrapper">
        <div class = "user-data">
            <p class = "user-id mt-3 bg-body-secondary text-emphasis-secondary rounded">id: {{user.id}}</p>
                <div class = "user-name mt-3 bg-body-secondary text-emphasis-secondary rounded">Ваше имя: {{user.username}}</div>
                <div class = "user-email mt-3 bg-body-secondary text-emphasis-secondary rounded">Ваша почта: {{user.email}}</div>
        </div>
    </div>
    <h2 class="mt-5 mb-3 liked">Последнее понравившееся:</h2>
    <div class="row row-cols-3" >
        {% for item in liked %}
            <div class="col text-center p-2">
                <div class="card" style="border-radius: 20px;"> 
                    <div class="card-body">
                        <a href="/food/item/?id={{ item.fruit.id }}" style="height: 400px; width: 400px;">
                        <img src="{{ item.fruit.image.url }}" height="375px" width="375px" class="img-responsive" style="border-radius: 0;" alt="...">
                      <p class="card-text pt-3">{{ item.fruit.name }}</p>
                     </a> 
                    </div>
                
                </div>
            </div>
    
        {% endfor %}
        </div>

</div>
<div class="d-grid gap-2 mb-5">
    {% if user.is_authenticated %}
    <a type="button" class="btn btn-outline-danger btn-lg" aria-current="page" href="{% url 'remove_user' %}">Удалить профиль</a>
    {% else %}
    <button type="button" class="btn btn-outline-danger btn-lg" aria-current="page" href="{% url 'remove_user' %}" disabled>Удалить профиль</button>
    {% endif %}
</div>


{% endblock %}